<template>
  <div id="goods">
    <van-sidebar v-model="active" id="goods-leftTab">
      <van-sidebar-item
        :title="item"
        v-for="(item, index) in sidebarData"
        :key="index"
        @click="changeGoods(index)"
      />
    </van-sidebar>

    <div id="goods-rightTabContent">
      <div class="title">{{ title }}</div>
      <div
        class="goods-scroll"
        v-for="(item, index) in activeData"
        :key="index"
      >
        <van-card
          @click="incrementDetail(item)"
          :price="item.price"
          :desc="item.goodsDesc"
          :title="item.name"
          :thumb="item.imgUrl"
        >
          <template #footer>
            <van-button size="mini" @click.stop="incrementCart(item)"
              >+</van-button
            >
          </template>
        </van-card>
      </div>
    </div>
  </div>
</template>

<script setup>
import { Popup } from "vant";
import { useRouter } from "vue-router";
import { ref, onMounted, computed } from "vue";
import { getGoodsList } from "@/api/index.js";
import { reactive } from "vue";
const sidebarData = reactive([]); //侧边栏
const contentData = reactive([]); //侧边栏
const title = ref("热销榜");
const active = ref(0); //当前激活的标签索引
import { useCartStore } from "@/stores/cart.js"; // 引入 Pinia 仓库
const cartStore = useCartStore(); // 使用 Pinia 仓库
const router = useRouter();
// 使用计算属性来动态更新 activeData
const activeData = computed(() => contentData[active.value]);

const changeGoods = (index) => {
  active.value = index;
  title.value = sidebarData[index];
};
const incrementCart = (item) => {
  cartStore.increment(); // 更新 Pinia 仓库
  cartStore.addCartItem(item); // 更新 Pinia 仓库
};

const incrementDetail = (item) => {
  // console.log("我是", item);
  cartStore.detailData = { ...item };
  console.log("我是", cartStore.detailData);
  router.push("/detail");
};

onMounted(async () => {
  const res = await getGoodsList();
  console.log(res.goodsList);
  res.goodsList.forEach((item) => {
    sidebarData.push(item.name);
    contentData.push(item.foods);
  });
  activeData.value = contentData[active.value];
});
</script>

<style lang="less" scoped>
#goods {
  height: 100%;
  display: flex;
  #goods-leftTab {
    width: 30%;
    height: 100%;
    :deep(.van-sidebar-item) {
      border: 1px solid #f1f1f1;
      font-size: 12px;
      padding: 13px;
      height: 45px;
      .van-badge--top-right {
        transform: translate(90%, -40%);
      }
      .van-badge {
        font-size: 10px;
      }
    }
  }

  #goods-rightTabContent {
    width: 70%;
    background: red;
    overflow-y: auto;
    background-color: #f4f4f4;
    .title {
      font-size: 12.5px;
      padding: 10px 0 10px 10px;
    }
    :deep(.van-card) {
      margin-bottom: 4px;
      background-color: #fff;
      margin-top: 0;
      padding: 10px;
      box-sizing: border-box;
      height: 85px;
      .van-card__title {
        font-size: 13px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }

      .van-card__desc {
        font-size: 11px !important;
        margin-top: 2px !important;
      }
      .van-card__desc {
        font-size: 12px;
        color: #999;
        margin-top: 5px;
      }
      .van-card__thumb {
        width: 60px;
        height: 60px;
      }

      .van-card__bottom {
        // line-height: 50px;
        position: absolute;
        left: 0px;
        top: 38px;

        .van-card__price > div {
          color: red;
        }
      }
      .van-card__footer {
        font-size: 18px;
        position: absolute;
        right: 10px;
        top: 60px;
        background: rgb(255, 217, 0);
        width: 17px;
        text-align: center;
        height: 17px;
        line-height: 19px;
        border-radius: 50%;
      }
    }
  }
}
</style>
